/// <reference path="jquery-1.4.1.min.js" />
(function () {

    $.fn.popbox = function (options) {
        var settings = $.extend({
            selector: this.selector,
            open: '.moreOptionStatus',
            box: '.moreStatusOptionBox',
            arrow: '.arrow',
            arrow_border: '.arrow-border',
            close: '.close',
            top: 13,
            color: 'white',
            defaultColor: 'white',
            padLeft: true,
            classOnActive: 'active'
        }, options);

        var methods = {
            open: function (event) {
                event.preventDefault();
                methods.close();
                var pop = $(this);
                var box = $(this).parent().find(settings['box']);
                $(this).css("background-color", settings['color']);
                $(this).addClass(settings['classOnActive']);
                $(this).removeClass('moreOptionNetwork');
                box.find(settings['arrow']).css({ 'left': box.width() / 2 - 10 });
                box.find(settings['arrow_border']).css({ 'left': box.width() / 2 - 10 });
                if (box.css('display') == 'block') {
                    methods.close();
                } else {
                    box.css({ 'display': 'block' });
                }
            },

            close: function () {
                $(settings['box']).hide();
                $(settings['open']).css("background-color", settings['defaultColor']);
                $(settings['open']).removeClass(settings['classOnActive']);
                $(settings['open']).addClass('moreOptionNetwork');
            }
        };

        $(document).bind('keyup', function (event) {
            if (event.keyCode == 27) {
                methods.close();
            }
        });

        $(document).bind('click', function (event) {
            if (!$(event.target).closest(settings['selector']).length) {
                methods.close();
            }
        });

        return this.each(function () {
            // $(this).css({ 'width': $(settings['box']).width() }); // Width needs to be set otherwise popbox will not move when window resized.
            $(settings['open'], this).live('click', methods.open);
            $(settings['open'], this).parent().find(settings['close']).bind('click', function (event) {
                event.preventDefault();
                methods.close();
            });
        });
    }

}).call(this);
